<template>
<div class="coupon flex-box-div">
    <van-tabs v-model="active" swipeable @change="getCoponList">
        <van-tab title="全部" name=""> </van-tab>
        <van-tab title="可使用" name="wait_use"></van-tab>
        <van-tab title="已过期" name="invalid"></van-tab>
    </van-tabs>
    <!-- <div class="container">
        "use_state": 0,//0-未使用 1-已使用 2-已过期
    </div> -->
    <div class="flex-1 overflow-y">
        <div class="container">
            <div class="coupon-item flex" v-for="item in list" :key="item.id">
                <div class="left text-left font-size-12 flex-1">
                    <div class="price"> <span class="font-size-18">￥{{ item.money }}</span> 卷</div>
                    <div class="tit">{{ item.name }}</div>
                    <div class="sub_tit text-gray fz-12">{{ item.pay_money_intro }}</div>
                    <div class="date text-gray ">{{ item.expire_date }}</div>
                </div>
                <div class="btn p10 height100 flex-center fz-12" :class="{ is_active: item.use_state === 0 }">
                    <span v-if="item.use_state === 0">可使用</span>
                    <span  v-if="item.use_state === 1">已使用</span>
                    <span  v-if="item.use_state === 2">已过期</span>
                </div>
            </div>
        </div>
    </div>

</div>
</template>

<script>
export default {
    data () {
        return {
            active: '',
            list: []
        }
    },
    methods: {
        getCoponList () {
            this.$buyer.getCoupon(this.active).then(res => {
                this.list = res.data.list
            })
        }
    },
    created () {
        this.getCoponList()
    }
}
</script>

<style lang="less" scoped>
.container {
    padding-top: 10px;
}
.coupon-item {
    background-color: #fff;
    height: 100px;
    margin-top: 10px;
    .left {
        padding: 10px;
        .price {
            margin-bottom: 4px;
        }
        .date {
            margin-top: 2px;
        }
    }
    .btn {
        background-color: #eaeaea;
    }
    .is_active {
        background-color: rgba(217, 37, 25, 60%);
        color: #fff;
    }
}
</style>
